import React from 'react';
import {List, Card, Input, Statistic, Row, Col, Space} from 'antd';

import './style.less';
import { getList } from "@/services/article";
import {ClockCircleOutlined, UserOutlined} from "@ant-design/icons";
import {getStore} from "@/utils/store";
import { CURRENT_MEMBER } from "@/common/constant";

const { Search } = Input;

const aa = [
  {b:'  比特币是一种P2P形式的虚拟的加密数字货币。比特币的概念最初由中本聪在2008年11月1日提出，并于2009年1月3日正式诞生 。与所有的货币不同，比特币不依靠特定货币机构发行，它依据特定算法，通过大量的计算产生，比特币经济使用整个P2P网络中众多节点构成的分布式数据库来确认并记录所有的交易行为，并使用密码学的设计来确保货币流通各个环节安全性。比特币与其他虚拟货币最大的不同，是其总数量非常有限，具有极强的稀缺性。'},
  {b:'  《中华人民共和国民法典》被称为“社会生活的百科全书”，是新中国第一部以法典命名的法律，在法律体系中居于基础性地位，也是市场经济的基本法。《中华人民共和国民法典》共7编、1260条，各编依次为总则、物权、合同、人格权、婚姻家庭、继承、侵权责任，以及附则。2020年5月28日，十三届全国人大三次会议表决通过了《中华人民共和国民法典》，自2021年1月1日起施行。婚姻法、继承法、民法通则、收养法、担保法、合同法、物权法、侵权责任法、民法总则同时废止。'},
  {b:'  地摊经济是指通过摆地摊获得收入来源形成的一种经济形式。地摊经济是城市里的一种边缘经济，一直由于影响市容环境而不能堂皇入室，但地摊经济有其独特的优势，在金融危机的背景下一定程度上缓解了就业压力。2020年，"地摊经济"火遍大江南北，各地政府纷纷传递出支持"地摊经济"发展的好声音。"地摊经济"把"人民至上"的发展理念转化为群众"真金白银"的获得感、幸福感和安全感。'},
  {b:'  比特币是一种P2P形式的虚拟的加密数字货币。比特币的概念最初由中本聪在2008年11月1日提出，并于2009年1月3日正式诞生 。与所有的货币不同，比特币不依靠特定货币机构发行，它依据特定算法，通过大量的计算产生，比特币经济使用整个P2P网络中众多节点构成的分布式数据库来确认并记录所有的交易行为，并使用密码学的设计来确保货币流通各个环节安全性。比特币与其他虚拟货币最大的不同，是其总数量非常有限，具有极强的稀缺性。'},
  {b:'  消费者物价指数（consumer price index），又名居民消费价格指数，简称CPI。是一个反映居民家庭一般所购买的消费品和服务项目价格水平变动情况的宏观经济指标。它是在特定时段内度量一组代表性消费商品及服务项目的价格水平随时间而变动的相对数，是用来反映居民家庭购买消费商品及服务的价格水平的变动情况，是一个月内商品和服务零售价变动系数。'},
  {b:'  净网2020为认真贯彻落实习党中央重要批示指示精神，进一步强化对网络违法犯罪打击和网络空间秩序整治力度，坚决打掉网络黑灰产业链，整治网络违法犯罪生态，遏制网络犯罪高发势头，经公安部党委批准，公安部网络安全保卫局近日已启动“净网2020”专项行动，继续打击整治网络违法犯罪活动，深入整顿网上秩序，进一步营造安全、清朗、有序的网络环境。'},
  {b:'  数字鸿沟是指在全球数字化进程中，不同国家、地区、行业、企业、社区之间，由于对信息、网络技术的拥有程度、应用程度以及创新能力的差别而造成的信息落差及贫富进一步两极分化的趋势。2020年8月，一段“老人无健康码乘地铁受阻”的视频在网上热传，引发公众对于老年人遭遇“数字鸿沟”窘境的热议。'},
  {b:'  两新一重是2020年《政府工作报告》中出现的新词，即新型基础设施建设，新型城镇化建设，交通、水利等重大工程建设。“两新一重”意义在于“既促消费惠民生、又调结构增后劲”，实际体现了一种以民生为导向的、支撑内需扩大的重大举措。'},
  {b:'  AI芯片也被称为AI加速器或计算卡，即专门用于处理人工智能应用中的大量计算任务的模块（其他非计算任务仍由CPU负责）。'},
  {b:'  2018年堪称5G元年，随着标准冻结、规模试验在各国展开，5G正式商用已进入倒计时。5G时代的到来绝不只体现在用几秒钟就能下载一部高清电影，它还将编织起由物联网、智能汽车、无人飞机、远程医疗、虚拟现实所构成的未来世界。不仅如此，新一代信息通信技术也是高质量发展和经济结构优化的重要推力。'},
  {b:'  人工智能当互联网像第二次工业革命中的“电”一样，成为人类社会的重要基础设施时，上一波技术创新的浪潮已退去，新一轮人工智能革命开启。未来人工智能相关技术的发展，不仅将带动大数据、云服务、物联网等产业的升级，还将全面渗透金融、医疗、安防、零售、制造业等传统产业，应用前景广阔。'},
  {b:'  无人驾驶，随着主要车企及科技公司不断推出新的自动驾驶技术，世界各国都在积极制定自动驾驶普及路线图，放宽无人驾驶汽车相兰法律法规，主要集中在道路测试和规划、驾驶分级、汽车制造等方面。\n'},
  {b:'  共享出行是指人们无需拥有车辆所有权，以共享和合乘方式与其他人共享车辆，按照自己的出行要求付出相应的使用费的一种新兴交通方式。包括以打车软件、共享单车为代表的一大批创新模式。'},
  {b:'  全面屏是手机业界对于超高屏占比手机设计的一个比较宽泛的定义。从字面上解释就是手机的正面全部都是屏幕，手机的四个边框位置都是采用无边框设计，追求接近100%的屏占比。但由于受限于目前的技术，业界宣称的全面屏手机暂时只是超高屏占比的手机，没有能做到手机正面屏占比100%的手机，但是已经能实现拥有超窄边框设计。'},
  {b:'  区块链技术是在多方无需互信的环境下，通过密码学技术让系统中所有参与方协作，来共同记录维护一个可靠数据日志的方式。'}
];
const num = Math.floor(Math.random() * 15 );

export default class Article extends React.Component<any,any>{

  state: {
    dataList: [{
      title?: string
      content?: string
      author?: string
      createTime?: string
    }],
    realName: string
    articleNum: number
    likeNum: number
  } = {
    dataList: [{}],
    realName: '',
    articleNum: 0,
    likeNum: 0
  }

  componentDidMount() {
    let memberInfo = getStore({
      name: CURRENT_MEMBER
    });
    this.setState({realName: memberInfo.data.realName})
    getList(Object.assign({})).then(response => {
      this.setState({dataList: response.data.records});
      this.setState({articleNum: response.data.records.length});
      let likeNum = response.data.records.reduce((total: number, record: any) => (total + record.likeNum), 0)
      this.setState({likeNum: likeNum});
    })
  }
  
  render(){
    return(
      <div className={"box_body"}>
        <div className={"box_bj"}>
          <div>
            <Card className="box_information">
              <div className={"box_name"}>
                {this.state.realName}
              </div>
              <div className={"box_num"}>
                <Row gutter={16}>
                  <Col span={12}>
                    <Statistic title="文章数" value={this.state.articleNum} />
                  </Col>
                  <Col span={12}>
                    <Statistic title="点赞数" value={this.state.likeNum} valueStyle={{ color: '#3f8600' }}/>
                  </Col>
                </Row>
              </div>
            </Card>
          </div>
          <div className="box_article">
            <Card title="我的文章" bordered={false} >
              <List
                itemLayout="horizontal"
                dataSource={this.state.dataList}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      title={item.title}
                      description={
                        <Space size={20}>
                          <span>
                            <UserOutlined/> {item.author}
                          </span>
                          <span>
                            <ClockCircleOutlined/> {item.createTime}
                          </span>
                        </Space>
                      }
                    />
                  </List.Item>
                )}
              />
            </Card>
          </div>
          <div className={"box_search"}>
            <Card>
              <Search className="search" placeholder="搜文章" />
            </Card>
          </div>
          <div className="box_calendar">
            <Card title="今日推送">
              <div>
                <div className="site-calendar-demo-card">
                  &nbsp;&nbsp;&nbsp;&nbsp;{ aa[num].b}
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    )
  }
}
